<template>
	<view class="left">
		<view class="author">{{item.author}}</view>
		<view class="title">{{item.title}}</view>
		<view class="music"><text>{{item.title}}</text></view>
	</view>

</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {};
		},
		onLoad() {},
		methods: {},
	}
</script>

<style lang="scss" scoped>
	.left {
		position: absolute;
		bottom: 100rpx;
		left: 20rpx;
		z-index: 20;
		// background-color: pink;
		color: #FFFFFF;
		width: 300rpx;
		height: 150rpx;

		>view {
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
		}

		.author {
			font-size: 32rpx;
		}

		.title {
			font-size: 30rpx;
		}

		.music {
			overflow: hidden;

			>text {
				display: flex;
				flex: 1;
				animation: music 3s linear 0.2s infinite;
			}
		}
	}

	@keyframes music {
		0% {
			transform: translate3d(80%, 0, 0);
		}

		100% {
			transform: translate3d(-80%, 0, 0);
		}
	}
</style>
